<template>
    <div class="about"> 
        <div class="imgslider"> 
            <img src="@/assets/imgs/znlogo.png" alt=""/>
        </div>
        <div class="datas">
            <div class="item">
                <span class="lab">室内监测点</span>
                <span class="value">2</span>
            </div>

            <div class="item">
                <span class="lab">开关柜监测点</span>
                <span class="value">12</span>
            </div>
        </div>
        

        <ul class="lstInfo">
            <li>
                <div class="item">
                    <i class="icon fa fa-cogs"></i>
                    <div class="info">
                        <div class="lab">系统名称</div>
                        <div class="value">综能温湿度监测系统</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <i class="icon fa fa-home"></i>
                    <div class="info">
                        <div class="lab">服务机构</div>
                        <div class="value">综能电力科技有限公司</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <i class="icon fa fa-user-o"></i>
                    <div class="info">
                        <div class="lab">用户账号</div>
                        <div class="value">admin</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <i class="icon fa fa-tv"></i>
                    <div class="info">
                        <div class="lab">用户姓名</div>
                        <div class="value">系统管理员</div>
                    </div>
                </div>
            </li> 
        </ul>
        <ul class="lstInfo link">
            <li>
                <div class="item">
                    <i class="icon fa fa-key"></i>
                    <div class="info">
                        <div class="lab">修改密码</div>
                        <div class="value"><i class="fa fa-chevron-right"></i></div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item">
                    <i class="icon fa fa-power-off"></i>
                    <div class="info">
                        <div class="lab">退出登录</div>
                        <div class="value"><i class="fa fa-chevron-right"></i></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {admin} from '../../admin';
    import {moApp} from './moapp.js';
    export default {
        mounted(){
            var me = this;
            try {
                me.$nextTick().then(_=>{
                    return me.init();
                }).then(_=>{
                    me.refresh();
                })
            } catch (error) {
                console.log(error)
            }
        },
        data(){
            return{ 
                pageState:{
                    navIndex:0
                },
                pageStateKey : "zn_admin_mo_main",
                dicts:{
                    topimgs:[
                        {index:0 , img:require("../../../res/imgs/topimgs/p0.png")},
                        {index:1 , img:require("../../../res/imgs/topimgs/p1.png")},
                        {index:2 , img:require("../../../res/imgs/topimgs/p2.png")},
                        {index:3 , img:require("../../../res/imgs/topimgs/p3.png")},
                    ],
                    cates:[],
                    devices:[],
                    variants:[]
                }
            }

        },
        methods:{
            init(){
                var me = this;
                return new Promise((su,fa)=>{
                    try {
                        me.pageState = admin.api.getSessionObj( me.pageStateKey , me.pageState); 
                        su();
                    } catch (error) {
                        console.log(error);
                        su();
                    }
                })
            },
            refresh(){
                var me = this;
                try {
                    console.log( moApp)
                } catch (error) {
                    console.log(error)
                }
            },
            navDetail(deviceId){
                var me = this;
                try { 
                    admin.api.setSessionObj( me.pageStateKey , me.pageState); 
                    var url = "/mo/detail";
                    var device = me.dicts.devices.find( d=>{
                        return d.deviceId == deviceId;
                    })
                    if( device && device!=null){
                        me.$router.push({
                            path: url,
                            query:{
                                deviceId: deviceId ,
                                tId: device.vars.temperature.varId ,
                                hId: device.vars.humidity.varId , 
                            }
                        })

                    }
                } catch (error) {
                    console.log(error)
                }
            },

        }, 
        computed:{ 
        }
        
    } 
</script>

<style lang="less" scoped>
.about{
    
    padding: 0px;
    .header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        .title{
            color: #878b94;
            font-weight: bold;
        } 
    }
    .imgslider{ 
        margin-bottom: 15px;
        padding: 15px;
        img.topimg{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            
        }

    }
    .datas{
        background-color: #fff;
        padding: 15px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item{
            .lab{
                color: #878b94;
            }
            .value{
                font-size: 1.5em;
                font-weight: bold;
                padding-left: 10px;
            }
        }
    }

    ul.lstInfo{
        margin-bottom: 15px;
        background-color: #fff;
        li{
            .item{
                display: flex;
                i.icon {
                    height: 50px;
                    line-height: 50px;
                    width: 50px;
                    text-align: center;
                }
                .info{
                    flex: 1;
                    padding-right: 10px;
                    border-bottom: 1px solid #dcdfe6;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .lab{
                        height: 50px;
                        line-height: 50px;
                    }
                    .value{
                        font-weight: bold;
                    }
                }
            } 
        }
        li:last-child .item .info{
            border:0
        }
    }

        ul.lstInfo.link{
            li:active{
                background-color: #dcdfe6;
            }
        }
}

</style>